<template>
  <div>
    <div class="background">
      <Background />
      <BackgroundCard />
      <!-- <div class="calendar">
      <el-card shadow="hover" class="box-card">
        <el-calendar v-model="value"> </el-calendar>
      </el-card>
    </div> -->
      <SignatureBoard class="signature-board" />
    </div>
    <div class="flex1">
      <!-- 视频组件 -->
      <div class="video">
        <Video :src="src" />
      </div>
      <!-- 留言板组件 -->
      <div class="MessageBoard">
        <MessageBoard />

        <!-- 完整版的记事本组件 -->
        <ToDoFile />
      </div>
    </div>
    <div class="flex2">
      <Count />
    </div>
  </div>
</template>

<script>
import Background from "@/components/container/background/Background.vue";
import BackgroundCard from "@/components/container/background/BackgroundCard.vue";
import Video from '@/components/VideoAndAudio/Video.vue'
import SignatureBoard from "@/components/SignatureBoard.vue";
import MessageBoard from "@/components/MessageBoard/MessageBoard.vue";
import ToDoFile from '@/components/SmallComponents/ToDoFile.vue'
// import TodoList from "@/components/ToDoAgency.vue";//半成品记事本
import Count from "@/components/SmallComponents/CountStore.vue";
export default {
  data () {
    return {
      value: new Date(),
      src: require('@/assets/video/sintel-short.mp4')
    };
  },
  components: {
    Background,
    BackgroundCard,
    Video,
    SignatureBoard,
    MessageBoard,
    ToDoFile,
    Count,

  },
};
</script>

<style scoped>
.background {
  display: flex;
  flex-direction: row;
  align-items: center;

  justify-content: space-around;
  width: 100%; /* 占据整个容器的宽度 */
  height: 80%; /* 占据容器高度的80% */
}

.signature-board {
  width: 100%; /* 与背景组件宽度一致 */
  height: 80%; /* 与背景组件高度一致或略大 */
  max-width: 800px; /* 设置最大宽度，防止过大 */
  max-height: 600px; /* 设置最大高度，防止过高 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  background-color: #fff; /* 白色背景 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
  margin-top: 1rem; /* 顶部间距 */
}
.flex1 {
  display: flex;
}
.video {
  display: flex;
  width: 50%;
  height: 50%;
}
.MessageBoard {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 60%;
  gap: 20px;
}
.flex2 {
  display: flex;
  padding: 10px;
}
</style>
